<template>
	<div class="account_manage">
		<header>
			<span>账户列表</span>
			<span @click="state.edit = !state.edit">{{ state.edit ? '完成' : '编辑' }}</span>
		</header>

		<div class="list">
			<div class="list_item" v-for="item of state.accounts" :key="item.id">
				<div>
					<van-checkbox
						v-show="state.edit"
						style="margin-right: 12px"
						v-model="item.checked"
						icon-size="15px"
						checked-color="#FA5D8A"
					/>
					<span>{{ item.account }}</span>
				</div>
				<img src="@/assets/img/edit_icon.png" @click="edit(item.id)" />
			</div>
		</div>

		<div class="btns"  v-if="mainStore.storeIsLogin && mainStore.userInfo.user_id == mainStore.storeInfo.member.user_id">
			<van-button type="primary" size="large" @click="jumpAddAccountPage">添加账户</van-button>
			<van-button v-show="state.edit" type="primary" size="large" v-debounce="del">删除账户</van-button>
		</div>
    <div class="btns" v-else-if="!mainStore.storeIsLogin">
      <van-button type="primary" size="large" @click="jumpAddAccountPage">添加账户</van-button>
      <van-button v-show="state.edit" type="primary" size="large" v-debounce="del">删除账户</van-button>
    </div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store/index';

import { myWithdrawalAccounts, deleteMyWithdrawalAccount } from '@/api/my';
import { Toast } from 'vant';
import type { ToastOptions } from 'vant';

const mainStore = useMainStore();
const router = useRouter();
const state = reactive<any>({
	checked: true,
	edit: false,
	accounts: []
});

// 跳转添加账号
const jumpAddAccountPage = () => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {
    if (mainStore.userInfo.audit_state == 0) return Toast('您的资料正在审核中');
    if (mainStore.userInfo.audit_state == 2) return Toast('您的资料审核未通过');
  } else {
    if ((!mainStore.userInfo?.identity || mainStore.userInfo?.identity == '0')) {
      router.push('/registered');
      return;
    }
  }
  router.push({ name: 'addAccount' })
}

onMounted(() => {
	getMyWithdrawalAccounts();
});

const del = async (): Promise<void | ToastOptions> => {
	const delList = state.accounts.filter((item: any) => item.checked);
	if (!delList.length) return Toast('请选择账户');

	let allPromise: Promise<any>[] = [];
	delList.map((item: any) => {
		allPromise.push(deleteMyWithdrawalAccount(mainStore.user_id, item.id));
	});

	Promise.all(allPromise).then((res) => {
		Toast.success('删除成功');
		getMyWithdrawalAccounts();
	});
};

const edit = (id: number) => {
	router.push({ name: 'addAccount', query: { id } });
};

const getMyWithdrawalAccounts = async () => {
  let user_id:number;
  if (mainStore.storeIsLogin) {
    user_id = mainStore.storeInfo.member.user_id
  } else {
    user_id = mainStore.user_id
  }
	const res = await myWithdrawalAccounts(user_id);
	res.data.dataList.map((item: any) => {
		item.checked = false;
	});
	state.accounts = res.data.dataList;
};
</script>

<style lang="scss" scoped>
.account_manage {
	header {
		@include flx-justify-between;
		height: 50px;
		padding: 0 15px;
		border-bottom: 1px solid #e6e6e6;
		span {
			&:first-child {
				font-size: 14px;
				font-weight: bold;
			}
			&:last-child {
				color: #fa5d8a;
				font-size: 12px;
			}
		}
	}
	.list {
		border-bottom: 1px solid #e6e6e6;

		.list_item {
			@include flx-justify-between;
			height: 45px;
			margin: 0 15px;
			border-bottom: 1px solid #e6e6e6;
			color: #4d4d4d;
			font-size: 12px;

			& > div {
				@include flx-align-center;
			}
			img {
				width: 16px;
				height: 16px;
			}
			&:last-child {
				border: none;
			}
		}
	}
	.btns {
		margin: 70px 0;
		padding: 0 45px;
		button {
			height: 38px;
			margin-bottom: 15px;
			border: none;
			border-radius: 20px;
			font-size: 16px;
			background: linear-gradient(264deg, #f53d7d 0%, #fb56b3 100%);
			&:last-child {
				color: #cccccc;
				border: 1px solid #cccccc;
				background: white;
			}
		}
	}
}
</style>
